當 img 放在 div 中，會發現圖片與 div 底部有一小塊留白，使用開發者工具查看會發現 div 的高度比 img 本身的高度多了一點（約 2px）
以下參考此篇 文章 的解決方法（來源：葉子助教）

示意範例

緣由

因 img 預設是 inline- block 元素，inline / inline-block / table-cell 元素都可以設定 vertical-align 屬性，而 vertical-align 屬性預設值是 baseline，baseline 的設定會讓文字和其父元素的基（準）線對齊，這條基線會和最下方有些空間，是因英文中像是小寫 g j p q y，會超出基線以下，數字像是 3 4 5 7 9 也會有小部分在基線下
img 圖片也會在這基線上，因此也會留有基線下的小空間

解決方式

可以針對 img 本身改變 vertical-align 的屬性值，或是改變 display 設定

若是改變 vertical-align 可設定成以下任一屬性值

img { 
  vertical-align: top | bottom | text-top | text-bottom;
}

改變 display 屬性，改成區塊元素，不具有行內元素的特性 ( vertical-align 屬性無效)

img { 
  display: block;
}

或是針對 img 的父元素將字體大小設定為 0

.img {
  font-size: 0px;
}

參考資料：
HTML img 下方有不明空隙
vertical-align - CSS: Cascading Style Sheets | MDN
Baseline (typography) - Wikipedia